<!-- 歌曲列表 -->
<template>
    <transition name="slide-fade">
        <div class="the-aside" v-if="showAside">
            <h2 class="title">播放列表</h2>
            <ul class="menus">
                <li v-for="(item, index) in listOfSongs" :key="index"
                    :class="{'is-play':id === item.id}"
                     @click="toplay(item.id, item.url, item.pic, index, item.name, item.lyric)">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </transition>
</template>

<script>
import {mapGetters} from 'vuex'
import store from "@/store";
import {getCollectOfUserId} from "@/api";
export default {
    name: "TheAside",
    computed:{
        ...mapGetters([
            'showAside',     //是否显示播放中的歌曲列表
            'listOfSongs',   //当前歌曲列表
            'id',            //播放中的音乐id
            'loginIn',       //用户是否登录
            'userId',        //当前登录用户id
        ])
    },
    mounted(){
        let _this = this;
        document.addEventListener('click', function () {
            _this.$store.commit('setShowAside', false);
        }, true);
    },
    methods:{
        //获取名字前半部分-歌手名
        replaceLName(str){
            let arr = str.split("-");
            return arr[0];
        },
        //获取名字后半部分-歌名
        replaceFName(str){
            let arr = str.split("-");
            return arr[1];
        },
        //播放
        toplay: function (id, url, pic, index, name, lyric) {
            store.commit('setId', id);
            store.commit('setUrl', store.state.configure.HOST + url);
            store.commit('setPicUrl', pic);
            store.commit('setListIndex', index);
            store.commit('setTitle', this.replaceFName(name));
            store.commit('setArtist', this.replaceLName(name));
            store.commit('setLyric', this.parseLyric(lyric));
            store.commit('setIsSongActive', false);
            if(this.loginIn){
                getCollectOfUserId(this.userId)
                    .then(res => {
                        for(let item of res){
                            if(item.songId == this.id){
                                store.commit('setIsSongActive', true);
                                break;
                            }
                        }
                    });
            }
        },
        //解析歌词
        parseLyric(text) {
            //将歌词按行分解成数组
            let lines = text.split("\n");
            //时间格式的正则表达式
            let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g;
            //返回值
            let result = [];
            //对于歌词格式不对的直接返回
            if (!(/\[.+\]/.test(text))) {
                return [[0, text]];
            }
            //去掉前面格式不正确的行
            while (!pattern.test(lines[0])) {
                lines = lines.slice(1);
            }
            //遍历每一行，形成一个带着两元素的数组， 第一个元素是时间，第二个元素是歌词
            for (let item of lines) {
                //存前面的时间段
                let time = item.match(pattern);
                //存后面的歌词
                let value = item.replace(pattern, '');
                for (let item1 of time) {
                    //从第1个到倒数第1个
                    //取出时间，换算成数组
                    let t = item1.slice(1, -1).split(":");
                    if (value != '') {
                        result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/the-aside";
</style>